<template>
  <div>
    <supertable
      class="FileStoreTable"
      :tableData="tableData"
      :headerData="headerData"
      :height="800"
      :total="total"
      :limit="limit"
      :isCheckbox="false"
      @CurrentChange="CurrentChange"
      @SizeChange="SizeChange"
    >
      <template v-slot:formSolt>
        <div>
          <el-input
            size="small"
            placeholder="文件名"
            v-model="FileStoreInput"
            clearable
            class="FileStoreInput"
          >
          </el-input>
          <el-button
            type="success"
            size="mini"
            icon="el-icon-search"
            @click="fileMgrlistFn()"
            >搜索</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="reset()"
            >重置</el-button
          >
        </div>
      </template>
      <template v-slot:operationBtn="row">
        <div>
          <el-button size="mini" @click="download(row)">下载</el-button>
        </div>
      </template>
    </supertable>
  </div>
</template>
<script>
import supertable from "@/components/supertable";
import { fileMgrlist, filedownload } from "@/api/FileStore";
export default {
  name: "FileStore",
  data() {
    return {
      FileStoreInput: "",
      currentpage: 1,
      limit: 20,
      total: null,
      headerData: [
        {
          prop: "ID",
          label: "ID",
          width: "",
        },
        {
          prop: "fileName",
          label: "文件名",
          width: "",
        },
        {
          prop: "UploadDate",
          label: "上传日期",
          width: "",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    let _self = this;
    _self.fileMgrlistFn();
  },
  methods: {
    //下载
    download(row) {
      let _self = this;
      console.log(row);
      let data = {
        fileName: row.operationData.realFileName,
      };
      console.log(row.operationData.realFileName);
      //
      filedownload(data).then((res) => {
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([res], { type: "application/vnd.ms-excel" }),
            "" + row.operationData.fileName
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([res], { type: "application/vnd.ms-excel" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "" + row.operationData.fileName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },

    //每页显示多少条
    SizeChange(val) {
      let _self = this;
      console.log(val);
      _self.limit = val;
      _self.fileMgrlistFn();
    },

    //当前第几页
    CurrentChange(val) {
      let _self = this;
      console.log(val);
      _self.currentpage = val;
      _self.fileMgrlistFn();
    },

    //重置
    reset() {
      let _self = this;
      _self.FileStoreInput = "";
      _self.fileMgrlistFn();
    },

    //表格数据
    fileMgrlistFn() {
      let _self = this;
      _self.tableData = [];
      let data = {
        page: _self.currentpage,
        limit: _self.limit,
        originalFileName: _self.FileStoreInput.trim(),
      };
      fileMgrlist(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          let { limit, current, total } = res.data;
          _self.currentpage = current;
          _self.limit = limit;
          _self.total = total;
          for (let item of res.data.records) {
            _self.tableData.push({
              ID: item.id,
              fileName: item.originalFileName,
              UploadDate: item.createTime,
              realFileName: item.realFileName,
            });
          }
        }
      });
    },
  },
  components: { supertable },
};
</script>
<style scoped>
.FileStoreInput {
  width: 400px;
  margin: 20px 0;
}
.FileStoreTable {
  margin: 20px;
}
</style>